<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				border: #000000 1px solid;
				
			}
			#d1{
				width: 150px;
				height: 150px;
			}
			#d2{
				width: 100px;
				height: 100px;
			}
			#d3{
				width: 50px;
				height: 50px;
			}
		</style>
		
	</head>
	<body>
		<div id="d1">
			d1
			<div id="d2">
				d2
				<div id="d3">
					d3
				</div>
			</div>
		</div>
		<script type="text/javascript">
			let eles=document.querySelectorAll("div");
			for (var i = 0; i < eles.length; i++) {
			
				eles[i].addEventListener("click",fun1,true);//捕获型
				eles[i].addEventListener("click",fun2,false);//冒泡型
				
			}
			function fun1(){
				//event.target表示原始事件对象
				//event.currentTarget表示正在处理事件的对象
				console.log(`捕获型：${event.currentTarget.id}`);
			}
			function fun2(){
				console.log(`冒泡型：${event.currentTarget.id}`);
				event.stopPropagation();//阻止事件传播
			}
		</script>
	</body>
</html>
